<template>
<div>
  <main-layout>
    <template #top>
      <horizon-button-list :search="search"/>
      <a-button type="primary" @click="doit" :disabled="tableConfig.rowSelection.selectedRowKeys.length > 1">点我</a-button>
      <a-button type="primary" @click="doitdd" :disabled="tableConfig.rowSelection.selectedRowKeys.length > 1">点他</a-button>
    </template>

    <template #bottom>
      <my-table :columns="aco" :tableConfig="tableConfig" size="small" bordered a="1"  :test="test" :arr="arr" >
          <template #headerCell="{ column }">
            <template v-if="column.dataIndex === 'name'">
              <span>
                <smile-outlined />
                {{ column.title }}
              </span>
            </template>
          </template>

          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'name'">
              <a>
                {{ record.name }}2312{{ getRows(column, record) }}
              </a>
            </template>
            <template v-else-if="column.dataIndex === 'tags'">
              <span>
                <a-tag
                  v-for="tag in record.tags"
                  :key="tag"
                  :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
                >
                  {{ tag.toUpperCase() }}
                </a-tag>
              </span>
            </template>
            <template v-else-if="column.dataIndex === 'action'">
              <span>
                <a>Invite 一 {{ record.name }}</a>
                <a-divider type="vertical" />
                <a>Delete</a>
                <a-divider type="vertical" />
                <a class="ant-dropdown-link">
                  More actions
                  <down-outlined />
                </a>
              </span>
            </template>
            <template v-else-if=" column.dataIndex === 'a1' ">
              <span>这是地址  a1</span>
            </template>
            <template v-else-if=" column.dataIndex === 'a2' ">
              <span>这是地址  a2</span>
            </template>
          </template>
      </my-table>
    </template>
  </main-layout>
  <my-search-drawer :drawerConfig="drawerConfig" :testItem = "testItem"/>
</div>
</template>

<script>
import { SmileOutlined, DownOutlined } from '@ant-design/icons-vue';

import mainLayout from '@/basicComponents/mainLayout'
import horizonButtonList from '@/businessComponents/horizonButtonList'
import mySearchDrawer from '@/businessComponents/mySearchDrawer'
import comps from './comps'
// import { HappyScroll } from 'vue-happy-scroll'
// app.component('happy-scroll', HappyScroll)

import { columns, test } from './data.js'
import { reactive, ref , Fragment} from 'vue'

const data = [{
  key: '1',
  name: 'John Brown',
  age: 32,
  address: 'New York No. 1 Lake Park',
  tags: ['nice', 'developer'],
}, {
  key: '2',
  name: 'Jim Green',
  age: 42,
  address: 'London No. 1 Lake Park',
  tags: ['loser'],
}, {
  key: '3',
  name: 'Joe Black',
  age: 32,
  address: 'Sidney No. 1 Lake Park',
  tags: ['cool', 'teacher'],
}];
import { useRouter } from 'vue-router'
import myTable from '@/basicComponents/myTable'
export default {
  name: 'Home',
  components: {SmileOutlined, DownOutlined, mainLayout, horizonButtonList, myTable, mySearchDrawer},
  setup() {
    const router = useRouter()

    const drawerConfig = reactive({
      visible: false
    })

    const tableConfig = reactive({
      dataList: [],
      loading: false,
      clearAllSelection(){     // 清空表格 所有 选项
        tableConfig.rowSelection.selectedRows = []
        tableConfig.rowSelection.selectedRowKeys = []
      },
      pagination: {
        total: 0,
        current: 1,
        pageSize: 20,
      },
      rowSelection: {   // 为  null 则 没有  选择框
        selectedRows: [],       //  选择到的  记录
        selectedRowKeys: [],      // 选择到数据的   key  主键 唯一
      },
      change({current, pageSize}){
        tableConfig.pagination.current = current
        tableConfig.pagination.pageSize = pageSize

        getListData()
      }
    })

    getListData()
    function getListData(){
      tableConfig.loading = true
      $g.post('/demand/reserve/page',{
        page: tableConfig.pagination.current,
        planYear: "2021",
        projectStatusList: ["900101", "900102", "900103"],
        rows: tableConfig.pagination.pageSize,
      }).then(res => {
        tableConfig.dataList = res.body.records
        tableConfig.pagination.total = res.body.total
        tableConfig.loading = false
        console.log('table')
        // console.log(table)
      })
    }

    const aco = reactive(columns)

    function getRows(a, b){

    }

    const search = () => {
      console.log(123)
      console.log(Fragment)
      drawerConfig.visible = true
    }

    function goss(){
      router.push('/feasibilityStudy/dataManagement')
    }

    // const testing = reactive(test)
    const testing = test

    function doit(){
      // table.time.time = new Date().getTime()
      // console.log(table)
      // testItem = reactive({
      //   name: new Date().getTime()
      // })
      // testItem.name = new Date().getTime()
      // console.log(testItem)
      formState.form.name= new Date().getTime() + ''
    }

    function doitdd(){
      formState.form = {}
    }

    let arr = reactive([1,2,3])

    const formState = reactive({
      form: {name: ''}
    })

    const testItem = reactive({
      time: {
        time:new Date().getTime()
      }
    })

    const dossss = () => {
      const time = testItem.time
      // time.time = new Date().getTime()
      time = {
        time: new Date().getTime()
      }
      // testItem.time.time = new Date().getTime()
    }

    const fileList = ref([])

    const showFiles = () => {
      console.log(fileList.value)
    }

    return {
      testItem,
      data,
      aco,
      getRows,
      tableConfig,
      goss,
      search,
      comps,
      drawerConfig,
      doit,
      doitdd,
      arr,
      form: formState.form,
      test:testing,
      time: testItem.time,
      times: testItem.time.time,
      testItem,
      dossss,
      showFiles,
      fileList
    }
  }
}
</script>

<style scoped lang='less'>

</style>
